<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>YouTuTV全球最大视频论坛社区</title>
    <meta name="lee" content="YouTuTV全球最大视频论坛社区,电影,电视剧,博客,论坛,编程开发,教育,资源分享,英语学习,英语语法,教学视频,高考,成人,职业教育">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/mian.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap-theme.css}">
    <script th:src="@{/bootstrap/js/bootstrap.js}"></script>
    <style>
        .lay-blog .header {
            height: 100px;
            margin-bottom: -100px;
            line-height: 100px;
            background: #ff331e;
        }
    </style>
</head>
<body class="lay-blog">
<div class="header" style="background-color: #ff331e">
    <div class="header-wrap">
        <h1 class="logo pull-left">
            <a href="/index">
                <span th:include="header"></span>
            </a>
        </h1>
<!--        <form class="layui-form blog-seach pull-left" action="">-->
<!--            <div class="layui-form-item blog-sewrap">-->
<!--                <div class="layui-input-block blog-sebox">-->
<!--                    <i class="layui-icon layui-icon-search"></i>-->
<!--                    <input type="text" name="title" lay-verify="title" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->
<!--        </form>-->
        <div class="blog-nav pull-right">
            <div th:include="header-nav"></div>
            <a href="#" class="personal pull-left">
                <i class="layui-icon layui-icon-username"></i>
            </a>
        </div>
        <div class="mobile-nav pull-right" id="mobile-nav">
            <a href="javascript:;">
                <i class="layui-icon layui-icon-more"></i>
            </a>
        </div>
    </div>
    <ul class="pop-nav" id="pop-nav">
        <li><a href="/index">首页</a></li>
        <li><a href="/message">留言</a></li>
        <li><a href="/about">关于</a></li>
    </ul>
</div>
<div class="container-wrap">
    <div class="container" style="width: 80%;">
        <div class="contar-wrap">
            <h4 class="item-title">
                <p><i class="layui-icon layui-icon-speaker"></i>公告：<span>欢迎来到YouTuTV</span></p>
                <div style="font-size: 13px; padding-left: 40px" th:if="${name!=null}">
                    您已登陆，
                    你好：<span th:text="${fullname}"></span>，
                    当前登录用户名：<span th:text="${name}"></span>，
                    <a href="/logout" style="color: red;border-bottom: 1px solid blue;">退出登录</a>
                </div>
                <!--
                    v-if  vue   th:if thymeleaf
                -->
                <div th:if="${name==null}" style="font-size: 13px; padding-left: 40px">
                    您还未登陆
                    <a href="/login.html" style="color: red">请登录</a>
                </div>
            </h4>
            <div class="item" th:each="o:${list}">
                <div class="item-box  layer-photos-demo1 layer-photos-demo">
                    <h3><a th:href="@{'/detail/'+${o.getId()}}" th:text="${o.getArticleName()}"></a></h3>
                    <h5>发布于：<span th:text="${#dates.format(o.getCreateDate(), 'yyyy-MM-dd HH:mm:ss')}"></span></h5>
                    <!--								<p th:text="${#strings.abbreviate(o.getArticleContent(),280)}"></p>-->
                    <!--								<img th:src="@{/images/item.jpg}" alt="">-->
                </div>
                <div class="comment count">
                    <a th:href="@{'/detail/'+${o.getId()}}">评论(
                        <span th:text="${o.getCommentCount()}"></span>)</a>
                    <a th:href="@{'/articleZan/'+${o.getId()}}" class="like">点赞数(
                        <span th:text="${o.getCommendCount()}"></span>
                        )</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div th:include="food"></div>
</div>
<script th:src="@{/layui/layui.js}"></script>
<script>
    layui.config({
        base: '../static/js/'
    }).use('blog');
</script>
</body>
</html>